<template>
  <div class="detailBox" v-loading="loading">
    <!-- mal待研判 sec信息 sus低风险 unk中风险 gunk高风险 yzfx严重风险 -->
    <div
      class="car lineVal"
      :class="
        Data.severity_level == 0
          ? 'mal'
          : Data.severity_level == 1
          ? 'sec'
          : Data.severity_level == 2
          ? 'sus'
          : Data.severity_level == 3
          ? 'unk'
          : Data.severity_level == 4
          ? 'gunk'
          : Data.severity_level == 5
          ? 'yzfx'
          : ''
      "
    >
      <div class="top_">
        <div class="left_">
          <div
            class="icon_ click"
            slot="reference"
            :class="
              Data.severity_level == 0
                ? 'mal'
                : Data.severity_level == 1
                ? 'sec'
                : Data.severity_level == 2
                ? 'sus'
                : Data.severity_level == 3
                ? 'unk'
                : Data.severity_level == 4
                ? 'gunk'
                : Data.severity_level == 5
                ? 'yzfx'
                : ''
            "
          ></div>
        </div>
        <div class="right_">
          <div class="dl_">
            <div class="cen">
              <div class="textName">
                <span class="text">{{ Data.name || "-" }}</span>
              </div>
              <div class="info">
                <div class="li" v-for="item in Data.base_mapping">
                  <span>{{ item.key }}</span>
                  <span class="val">{{ item.value }} </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tabsBox">
      <m-tabs v-model="activeName" @tab-click="handleClick">
        <m-tab-pane label="基本信息" name="1"></m-tab-pane>
      </m-tabs>

      <m-tabs tab-position="left" v-if="Data.infos && Data.infos.length > 0">
        <m-tab-pane
          v-for="item in Data.infos"
          label="微步本地"
          v-if="item.intel_source == 2"
        >
          <div v-if="activeName == 1" class="matop">
            <div class="baleBox" v-for="itemC in item.data">
              <m-table :data="itemC.list" border>
                <m-table-column prop="name" :label="itemC.title">
                  <template slot-scope="scope">
                    <div class="bale">
                      <div class="li lab">{{ scope.row.key }}：</div>
                      <div class="li vla">{{ scope.row.value }}</div>
                    </div>
                  </template>
                </m-table-column>
              </m-table>
            </div>
          </div>
        </m-tab-pane>
        <m-tab-pane
          v-for="item in Data.infos"
          label="自定义情报"
          v-if="item.intel_source == 1"
        >
          <div v-if="activeName == 1" class="matop">
            <div class="baleBox" v-for="itemC in item.data">
              <m-table :data="itemC.list" border>
                <m-table-column prop="name" :label="itemC.title">
                  <template slot-scope="scope">
                    <div class="bale">
                      <div class="li lab">{{ scope.row.key }}：</div>
                      <div class="li vla">{{ scope.row.value }}</div>
                    </div>
                  </template>
                </m-table-column>
              </m-table>
            </div>
          </div>
        </m-tab-pane>
      </m-tabs>
    </div>
  </div>
</template>

<script>
// 引入接口
import { IntelligenceSearch } from "@/request/home/index";
export default {
  name: "Detail",
  data() {
    return {
      dialog: true,
      loading: true,
      Data: {},
      queryData: {},
      tableData: [
        {
          name: "",
        },
      ],

      id_: null,

      activeName: "1",
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.queryData = {
      value: this.$route.query.value,
    };
    this.id_ = this.$route.query.id;
    this.getData(this.queryData);
  },
  methods: {
    getData(data) {
      this.loading = true;
      IntelligenceSearch(data)
        .then((res) => {
          this.loading = false;
          if (res.data.code == 200) {
            let resData = res.data;
            resData.data.vuln_info.items.map((e) => {
              if (e.id == this.id_) {
                this.Data = e;
                console.log(this.Data);
              }
            });
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";
.detailBox {
  background-color: transparent !important;
  box-shadow: none !important ;
  ::v-deep .input_ {
    width: 100%;
    .el-input__inner {
      height: px2(34);
    }
    .el-input-group__append {
      background-color: $mainColor;
      width: px2(32);
      height: px2(32);
      padding: 0;
      .el-button {
        width: px2(32);
        height: px2(32);
        padding: 0;
        margin: 0;
      }
    }
    .el-icon-search {
      font-size: px2(16);
      color: #fff;
    }
  }

  ::v-deep .has-gutter .cell {
    width: px2(150);
    text-align: center;
  }
  .car {
    padding: px2(16);
    margin-top: px2(8);
    border-radius: px2(2);
    margin-bottom: px2(8);
    background: linear-gradient(
        180deg,
        rgba(255, 201, 185, 0.18) 0%,
        rgba(254, 210, 204, 0) 62%
      ),
      rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(px2(40));
    .top_ {
      display: flex;
      flex-wrap: nowrap;
      justify-content: start;
      align-items: center;
      .left_ {
        width: 10%;
        margin-right: px2(24);

        .icon_ {
          width: px2(88);
          height: px2(88);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          &:hover {
            .dialog {
              display: block;
            }
          }
          // 待研判
          &.mal {
            background-image: url("@/assets/image/home/mysql/1.png");
          }
          // 信息
          &.sec {
            background-image: url("@/assets/image/home/mysql/2.png");
          }
          // 低风险
          &.sus {
            background-image: url("@/assets/image/home/mysql/3.png");
          }
          // 中风险
          &.unk {
            background-image: url("@/assets/image/home/mysql/4.png");
          }
          // 高风险
          &.gunk {
            background-image: url("@/assets/image/home/mysql/5.png");
          }
          // 严重风险
          &.yzfx {
            background-image: url("@/assets/image/home/mysql/6.png");
          }
        }
        .lineVal {
          width: px2(88);

          .mal {
            background: linear-gradient(
                180deg,
                rgba(234, 240, 250, 0.18) 0%,
                rgba(255, 255, 255, 0) 63%
              ),
              rgba(255, 255, 255, 0.5);
          }
          .sec {
            background: linear-gradient(
                180deg,
                rgba(196, 255, 185, 0.18) 0%,
                rgba(254, 210, 204, 0) 62%
              ),
              rgba(255, 255, 255, 0.5);
          }
          .sus {
            background: linear-gradient(
                180deg,
                rgba(255, 247, 214, 0.18) 0%,
                rgba(255, 255, 255, 0) 62%
              ),
              rgba(255, 255, 255, 0.5);
          }
          .unk {
            background: linear-gradient(
                180deg,
                rgba(255, 230, 214, 0.335) 0%,
                rgba(255, 255, 255, 0) 62%
              ),
              rgba(255, 255, 255, 0.5);
          }
          .gunk {
            background: linear-gradient(
                180deg,
                rgba(255, 201, 185, 0.18) 0%,
                rgba(254, 210, 204, 0) 62%
              ),
              rgba(255, 255, 255, 0.5);
          }
          .yzfx {
            background: linear-gradient(
                180deg,
                rgba(255, 185, 185, 0.18) 0%,
                rgba(254, 210, 204, 0) 62%
              ),
              rgba(255, 255, 255, 0.5);
          }
          .line_ {
            width: px2(80);
            height: px2(1);
            margin: 0 auto;
            margin-top: px2(25);
            &.l2 {
              margin-top: 0;
            }
          }
          .padd {
            padding: px2(5) 0;
            text-align: center;
            .sumText {
              margin-bottom: px2(5);
              font-size: px2(12);
              color: $fontColorL;
            }
            .sumVal {
              font-size: px2(12);
              color: $fontColorL;
              span {
                color: #f52727;
              }
            }
          }
        }
      }
      .right_ {
        width: 100%;
        .dl_ {
          width: 100%;
          // padding-bottom: px2(18);
          // border-bottom: px2(1) solid $borderColor;
          .cen {
            .textName {
              font-size: px2(20);
              margin-bottom: px2(18);
              color: $fontColorW;
              display: flex;
              flex-wrap: nowrap;
              justify-content: start;
              align-items: center;
              .text {
                margin-right: px2(5);
              }
              .el-icon-document-copy {
                font-size: px2(14);
              }
            }
            .tag {
              margin-bottom: px2(15);
            }
            .info {
              font-size: px2(12);
              color: $fontColorL;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-items: center;
              .li {
                white-space: nowrap;
                margin-right: px2(140);
                margin-bottom: px2(10);
                &:last-child {
                  margin-right: 0;
                }
                span {
                  display: inline-block;
                  vertical-align: middle;
                }
                .val {
                  color: $fontColorW;
                  margin-left: px2(16);
                  &.macolor {
                    color: $mainColor;
                  }
                }
              }
            }
          }
          .right {
            min-width: px2(300);
            font-size: px2(12);
            display: flex;
            flex-wrap: nowrap;
            justify-content: start;
            align-items: center;
            .ul {
              padding: px2(0) $gap;
              &:first-child {
                border-right: px2(1) solid $borderColor;
              }
              .text {
                color: #5e6573;
                margin-bottom: px2(5);
                &.t2 {
                  color: $fontColorW;
                  margin-top: px2(10);
                }
              }

              .imgBox {
                .img_ {
                  display: inline-block;
                  vertical-align: middle;
                  width: px2(16);
                  height: px2(16);
                  margin-right: px2(5);
                }
              }
            }
          }
        }
        .bl_ {
          margin-top: px2(18);
          .el-col:nth-child(4n) {
            margin-bottom: px2(10);
          }
          .detail {
            font-size: px2(12);
            color: $fontColorL;

            span {
              display: inline-block;
              vertical-align: middle;
            }
            .leb {
              min-width: px2(60);
            }
            .val {
              margin-left: px2(16);
              color: $mainColor;
            }
          }
        }
      }
    }
  }

  .tabsBox {
    background-color: #fff;
    padding: px2(16);
    padding-top: px2(10);
    .Table {
      padding-top: px2(10);
      margin: 0;
      padding-right: px2(15);
      padding-left: px2(20);
    }
    ::v-deep .el-tabs__item {
      font-size: px2(14);
      color: $fontColorW;
    }
    ::v-deep .el-tabs__item.is-active {
      color: $mainColor;
    }
    ::v-deep .el-tabs__active-bar {
      background-color: $mainColor;
    }
  }
}
.whois {
  .ul {
    margin-bottom: px2(19);
    span {
      display: inline-block;
      vertical-align: middle;
    }
    .whName {
      width: px2(80);
      text-align: right;
      margin-right: px2(70);
    }
  }
}
.SSL {
  .title {
    font-size: px2(14);
    color: #2f3540;
    margin-bottom: px2(8);
  }
  .sshZs {
    background: #edf1f7;
    border: px2(1) solid #dee3eb;
    padding: px2(20);

    .zhBtn {
      width: px2(68);
      text-align: center;
      border-radius: px2(5);
      height: px2(24);
      line-height: px2(24);
      border: px2(1) solid #03a500;
      color: #03a500;
      font-size: px2(10);
    }
    .sslText {
      margin-top: px2(14);
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      .mode {
        width: 50%;
        font-size: px2(10);
        .li {
          display: flex;
          flex-wrap: nowrap;
          justify-content: start;
          margin-bottom: px2(12);
          .label {
            width: px2(88);
            color: #97999f;
          }
          .val {
            color: #727478;
          }
        }
      }
    }
  }
}
.matop {
  padding-top: px2(10);
  ::v-deep .baleBox:nth-child(1) {
    .el-table__header-wrapper {
      display: none;
    }
  }
}
.baleBox {
  padding-right: px2(15);
  padding-left: px2(20);
  ::v-deep .el-table--border .el-table__cell:first-child .cell {
    padding: 0 !important ;
  }
  ::v-deep .el-table .el-table__cell {
    padding: 0 !important ;
  }
  ::v-deep .el-table {
    max-height: 100% !important ;
  }
  ::v-deep .el-table__body-wrapper {
    max-height: 100% !important ;
  }
  .bale {
    white-space: nowrap;
    .li {
      display: inline-block;
      vertical-align: middle;
      height: px2(32);
      width: 100%;
      &.lab {
        width: px2(150);
        display: inline-block;
        text-align: center;
        background-color: #edf1f7;
      }
      &.vla {
        padding-left: px2(20);
      }
      border: px2(1) solid #dee3eb;
      border-top: none;
      border-left: none;
    }
  }
}
.pageCter {
  padding-top: px2(10);
  text-align: right;
}

.dialog_title {
  font-size: px2(12);
  color: $fontColorW;
  margin-bottom: px2(10);
  span {
    color: $red;
  }
}
// ::v-deep .el-table thead th {
//   display: none !important ;
// }
</style>
